<!doctype html>
<html>
<head>
    <link rel="stylesheet" href="styles/example.css">

    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
    <script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>


    <link rel="stylesheet" href="./styles/github.css">
    <script src="js/highlight.pack"></script>

    <link rel="stylesheet" href="styles/tabpage.css">
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>

    <script src="../src/core/PrivateScope.js"></script>
    <script src="../src/core/Utility.js"></script>
    <script src="../src/core/Deferred.js"></script>
    <script src="../src/core/AttachedData.js"></script>
    <script src="../src/core/DataObserver.js"></script>
    <script src="../src/core/ArrayMonitor.js"></script>
    <script src="../src/core/GlobalSymbolHelper.js"></script>
    <script src="../src/core/OptionParser.js"></script>
    <script src="../src/core/KnotManager.js"></script>
    <script src="../src/core/CBSLoader.js"></script>
    <script src="../src/core/HTMLAPProvider.js"></script>
    <script src="../src/core/HTMLKnotBuilder.js"></script>
    <script src="../src/core/AddonHTMLAPProvider.js"></script>
    <script src="../src/core/ComponentAPProvider.js"></script>
    <script src="../src/core/KnotInterface.js"></script>

    <link rel="stylesheet" href="styles/tabpage.css" >
    <script type="text/cbs" src="cbs/tabpage.pkg.cbs"></script>
    <script type="text/cbs" src="cbs/sourceTab.pkg.cbs"></script>
    <script src="js/tabpage.js" id="tabPageSource"></script>
    <script type="text/javascript" src="js/sourceTab.js"></script>

    <script src="../src/debugger/knot.debug.js"></script>

    <style type="text/css">
    #editor1, #editor2{
        width: 300px;
        height: 200px;
        display:  inline-block;
    }

    .curValue{
        max-width: 600px;
    }
    </style>

    <link rel="stylesheet" href="styles/tagEditor.css" class="exampleCSS" title="Editor CSS">
    <script type="text/cbs" src="cbs/tagEditor.pkg.cbs" class="exampleCBS" title="Editor CBS"></script>
    <script type="text/javascript" src="js/tagEditor.js" class="exampleJS" title="Editor Javascript"></script>

    <script type="text/cbs"  id="inPageCBS">
    /* knot-example-tagEditor is the Access Point name for tagEditor component in this example  */

    #editor1{
        tags:/tags;
    }

    #editor2{
        tagColor:'darkblue';
        tags:/tags;
    }
    #currentTags{
        text:/tags
    }
    </script>
    <script id="inPageJS">
        window.tags = "knot.js,javascript,something cool";
    </script>
</head>
<body>
<div class="knot_example">

    <h2>Knot.js example - Tag editor</h2>

    <div class="curValue">
        <p>
        Current tags:<b id="currentTags"></b>
        </p>
    </div>


    <div id="editor1" knot-component="TagEditor"></div>

    <div id="editor2" knot-component="TagEditor"></div>

</div>

<div id="sourceTab" knot-debugger-ignore  knot-component="SourceTabPage">
</div>
<script type="text/cbs">
        #sourceTab{
            sourceInfo:/sourceCodeInfo.codes
        }
</script>
<script>
    //collect source codes before knot changes the HTML
    window.sourceCodeInfo = {codes:null};

    window.SourceCodeHelper.collectSourceCodes(
            [{selector:".knot_example",title:"HTML", type:"html"},
                {selector:"#inPageJS",title:"In-page Javascript", type:"javascript"},
                {selector:"#inPageCBS",title:"In-page CBS", type:"cbs"},
                {selector:".exampleJS",title:"Editor Javascript", type:"javascript"},
                {selector:".exampleCBS",title:"Editor CBS", type:"cbs"},
                {selector:".exampleCSS",title:"Editor CSS", type:"cbs"}],
            function(res){
                window.sourceCodeInfo.codes = res;
            });
</script>

</body>
</html>